<template>
	<div class="footer">
		<ul> 
			<li
			v-for="item in list"
			>
				<router-link :to="item.href"  active-class="active">
					<i class="iconfont" :class="item.className" ></i>
					<span>{{item.title}}</span>
				</router-link>
			</li> 
		</ul>
	</div>
</template>
<script type="text/javascript">
	export default{
		name:'footer',
		data(){
			return{
				list:[
					{
						title:'盘点',
						className:'icon-DiskEvaluation',
						href:'/PlateAll'
					},
					{
						title:'项目',
						className:'icon-project',
						href:'/project'
					},
					{
						title:'商城',
						className:'icon-ShoppingMall',
						href:'/ShoppingMall'
					},
					{
						title:'我的',
						className:'icon-wd02',
						href:'/myCenter'
					}

				]

			}
		}
	}
</script>
<style scoped>
	.footer{
		width: 100%;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #cccccc;
		background-color: #fff;
	}
	.footer ul{
		width: 100%;
		height: 1.3066666667rem;
	}
	.footer ul li{
		width:25%;
		display:inline-block;
		float: left;
		text-align: center; 
	}
	.footer ul li a{
		color: #666666;
		display: inline-block;
		padding:0.1333333333rem;
	}
	.footer ul li a i{
		display: block;
		font-size: 0.5333333333rem;

	}
	.footer ul li a span{
		display: block;
		font-size: 0.2666666667rem;
	}
	.footer ul li a.active{
		color: #db2023;
	}

</style>